<template>
    <div>
      <ul class="sellerList border-bottom">
        <router-link tag="li"
                      :to="'/seller/'+ id + item.path"
                      v-for="(item, index) of list"
                      :class="{active: active === item.path}"
            :key="index">{{item.name}}</router-link>
      </ul>
    </div>
</template>

<script>
export default {
  name: 'SellerList',
  data () {
    return {
      list: [
        {'name': '商品', 'path': '/goods'},
        {'name': '评价', 'path': '/ratings'},
        {'name': '商家', 'path': '/sellerInfo'}
      ]
    }
  },
  computed: {
    active () {
      let path = this.$route.path
      let index = path.lastIndexOf('/')
      return path.substring(index)
    },
    id () {
      let path = this.$route.path
      let index = path.lastIndexOf('/')
      return path.substring(index - 1, index)
    }
  }
}
</script>

<style lang='scss' scoped>
  .sellerList {
    display: flex;
    &.border-bottom::before {
      border-color: rgba(7, 17, 27, .1);
      border-width: 2px;
    }
    li {
      height: 80px;
      width: 33.33%;
      line-height: 80px;
      text-align: center;
      font-size: 28px;/*px*/
      &.active {
        color: rgb(240, 20, 20);
      }
    }
  }
</style>
